<template>
  <div>
    <el-col class="first-col">
      <el-row class="every-row"
        ><!--每日推荐-->
        <el-col style="height: inherit; width: inherit">
          <el-row style="height: 15%"
            ><!--文字-每日推荐-->
            <span class="title-font">每日推荐</span>
            <div class="title-bottom"></div>
          </el-row>
          <el-row class="showLike"
            ><!--展示书籍-->
            <el-col v-for="item in recommendBooks" :key="item" class="four-col">
              <img :src="item.img" class="four-img" />
              <div class="showBookName">{{ item.name }}</div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="every-row"
        ><!--热门借阅-->
        <el-col style="height: inherit; width: inherit">
          <el-row style="height: 15%"
            ><!--文字-猜你喜欢-->
            <span class="title-font">热门借阅</span>
            <div class="title-bottom"></div>
          </el-row>
          <el-row class="showLike"
            ><!--展示书籍-->
            <el-col v-for="item in hotBorrow" :key="item" class="four-col">
              <img :src="item.img" class="four-img" />
              <div class="showBookName">{{ item.name }}</div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="every-row"
        ><!--猜你喜欢-->
        <el-col style="height: inherit; width: inherit">
          <el-row style="height: 15%"
            ><!--文字-猜你喜欢-->
            <span class="title-font">猜你喜欢</span>
            <div class="title-bottom"></div>
          </el-row>
          <el-row class="showLike"
            ><!--展示书籍-->
            <el-col v-for="item in likeBooks" :key="item" class="four-col">
              <img :src="item.img" class="four-img" />
              <div class="showBookName">{{ item.name }}</div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-col>
  </div>
</template>

<script>
import axios from "axios";
import bottom from "@/components/userCommon/bottom.vue"
export default {
  name: "recommend",
  components:{
    bottom
  },
  mounted(){
    this.getHotBorrow()
    this.getLikeBooks()

  },
  data() {
    return {
        likeBooks:[
            {img:require('../../assets/img/user/book/book1.jpg'),name:'《贫穷的本质》'},
            {img:require('../../assets/img/user/book/book2.jpg'),name:'《世界现代设计史》'},
            {img:require('../../assets/img/user/book/book3.jpg'),name:'《经济学原理》'},
            {img:require('../../assets/img/user/book/book4.jpg'),name:'《世界工艺美术史》'}
        ],
        hotBorrow:[
        {img:require('../../assets/img/user/book/book1.jpg'),name:'《贫穷的本质》'},
            {img:require('../../assets/img/user/book/book2.jpg'),name:'《世界现代设计史》'},
            {img:require('../../assets/img/user/book/book3.jpg'),name:'《经济学原理》'},
            {img:require('../../assets/img/user/book/book4.jpg'),name:'《世界工艺美术史》'}
        ],
        recommendBooks:[
        {img:require('../../assets/img/user/book/book1.jpg'),name:'《贫穷的本质》'},
            {img:require('../../assets/img/user/book/book2.jpg'),name:'《世界现代设计史》'},
            {img:require('../../assets/img/user/book/book3.jpg'),name:'《经济学原理》'},
            {img:require('../../assets/img/user/book/book4.jpg'),name:'《世界工艺美术史》'}
        ],
        userId:'24123'
    };
  },
  methods: {
    getLikeBooks(){
      axios({
        method: "get",
        url: "http://localhost:5000/reader/like",
        params: {
          userId: this.userId,
        },
      })
        .then((r) => {
          //发送成功

          this.likeBooks = r.data.data.map((book) => ({
            img: require("D:/librarycover/" + book.img + ".jpg"),
            name: book.name,
          }));
        })
        .catch((r) => {
          console.log(r);
        });
    },
    getHotBorrow(){
      axios({
        method:'get',
        url:'http://localhost:5000/reader/hotBorrow',
        params:{
        }
       
    }).then(r=>{//发送成功
      console.log(r.data.data)
      this.hotBorrow = r.data.data.map((book) => ({
            img: require("D:/librarycover/" + book.img + ".jpg"),
            name: book.name,
          }));
    }).catch(r=>{
        console.log(r)
    })
    }
  },
};
</script>
<style scoped>
.every-row {
  height: 480px;
  width: 85%;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
}
.first-col {
  display: flex;
  padding-top: 50px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color:rgba(237, 237, 237, 1);
}
.title-font {
  font-size: 30px;
  letter-spacing: 3px;
  font-weight: bold;
  margin-left: 30px;
}
.title-bottom {
  background-color: rgba(168, 189, 203, 1);
  width: 200px;
  height: 10px;
  border-radius: 5px;
}
  .carousel{
    border-radius:50px;
    box-shadow:0px 0px 20px 20px rgba(0,0,0,0.25);
  }
  .four-col{
    height:80%;
    width:25%;
    display: flex; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
  }
  .four-img{
    width:80%;
    height:90%;
    margin-bottom: 20px;
    border-radius: 15px;
    box-shadow:20px 20px 15px 3px rgba(0,0,0,0.25);
  }
  .showLike{
    height: 85%;
    background-color: rgba(205, 198, 189, 1);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left:20px;
    padding-right:20px;
  }
  .showBookName{
    letter-spacing: 3px;
    font-size: 20px;
  }
</style>